<template>
  <div class="home">   
    <header>
        <div class="back">
            <div class="back_img" @click="back"><img src="../assets/images/icon-back.png" alt=""></div>
            <div class="back_span"><span>购物车</span></div>
            <div class="background" @click="go"></div>
        </div>
    </header>
     <cart-list></cart-list>
    <div class="foot">
        <cart-foot></cart-foot>
    </div>
  </div>
</template>

<script>
// // @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

import CartList from './cart/CartList.vue';
import CartFoot from './cart/CartFoot.vue';

export default {
  components: { CartList, CartFoot },
  name: 'Cart',
//   components: {
//     HelloWorld
//   }
data() {
    return {
        num:'1'
    }
},
 methods:{
   goto(id){
      this.$router.push({name:'detail',params:{id:id}})
   },
   back(){
        this.$router.go(-1)//后退  
    },
    go(){
        this.$router.push('/search')
    }
 },

 mounted() {
     this.$store.dispatch('setData')
 },
   
}
</script>
<style lang="scss" scoped>
    .back{
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        height: 2rem;
        background-color: #f2f2f2;
    }
    .back .back_img {
        width: 2rem;
    }
    .back .back_span {
        flex: 1;
        text-align: center;
    }
    .back .back_span span {
        font-size: .624rem;
        line-height: 2rem;
        color: #666;
        
    }
    .back img{
        width: 1.8rem;
    }
    .back .background {
        width: 2rem;
        height: 2rem;
        background: #f2f2f2 url('../assets/images/zoom.png') no-repeat center;
        background-size: 1.5rem 1.5rem;
    }

    section.focus img{
        height: 20rem;
    }
    .home{
        position: relative;
    }
    
    
    .foot{
        position: fixed;
        left: 0;
        bottom: 0;
        height: 2.08rem;
        width: 100%;
        background-color: #eee;
    }
</style>
